<script lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const viewerUrl = 'http://localhost:5168/pdf/web/viewer.html?file='
const fileDownloadUrl = 'http://localhost:5168/api/File/download?file='
export default {
    setup (props, context) {
        let path = ref<string>("")
        let url = ref<string>("")
        return {
            path,
            url
        }
    },
    mounted (){
        let router = useRouter()
        this.path = router.currentRoute.value.query.path as string
        this.urlChange()
    },
    beforeRouteUpdate(to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
        console.log(to)    
        this.path = to.query.path as string        
        this.urlChange()
        next()  
    },
    methods: {
        urlChange() {
            let paths = this.path.split('/')
            document.title = paths[paths.length-1]
            this.url = `${viewerUrl}${fileDownloadUrl}${this.path}`
        }
    }
}
</script>

<template>
    <div class="pdf-view">
        <iframe :src="url"></iframe>
    </div>
</template>
<style lang="scss" scoped>
.pdf-view {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    border: none;
    iframe {
        border: none;
        width: 100%;
        height: calc(100% - 6px);
    }
}
</style>
